<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <button @click=" obj.name = 'rose' ">修改name</button>
        <button @click=" obj.age = 28 ">修改age</button>
        <button @click=" obj.height = 158 ">修改height</button>

        <!-- 代表obj这个变量确实改变了 -->
        <!-- 因为他里面保存的地址不一样了 -->
        <button @click="obj = { name:'andy', age:48 }">修改obj指向</button>

        <p>{{ obj }} </p>
    </div>

    <script src="./vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    obj: {
                        name: 'jack',
                        age: 16,
                        height: 175
                    }
                }
            },
            watch: {
                // // 侦听obj这个对象的改变
                // // 这里相当于是在侦听obj的指向有没有变化
                // // 所以仅仅只是改属性不会触发
                // // 除非指向到新对象才会触发
                // obj () {
                //     console.log('obj改变了')
                // },

                // // 要侦听对象里属性的改变就要 对象.属性 来指定属性侦听
                // // 必须加引号
                // "obj.name" (a,b) {
                //     console.log('name改变了',a,b)
                // },
                // "obj.age" (newVal, oldVal) {
                //     console.log('age改变了', newVal, oldVal)
                // },

                // 需求：希望对象里任意属性改变了都要被侦听到
                // 如果按照上面这种写法，那就意味着对象里要是有10个属性我就要写10句侦听
                // 极其麻烦，所以希望有没有办法，写一次就能侦听到所有对象的变化
                // 有，那就是：深度侦听！
                obj: {
                    // 开启深度侦听
                    deep: true,
                    // 当对象里任意属性改变，都会触发handler这个函数
                    // 深度侦听里的参数没意义了，因为返回的都是obj这个对象
                    // 所以一般不会写这个参数了
                    handler () {
                        console.log('有属性改变了')
                    }
                }
            }
        })
    </script>
</body>
</html>